<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!-- p标签就是我们想要把每一次的数据都反映上来的视图 -->
    <p></p>
</div>
<script>
    // 1. 准备数据
    let data = {
        name: '林云龙'
    }
    // 2. 将数据转换成响应式 （数据发生变化之后操作我们的视图）
    Object.keys(data).forEach((key) => {
        defineReactive(data, key, data[key])
    })
    function defineReactive(data, key, value) {
        // 进行转换操作
        Object.defineProperty(data, key, {
            get() {
                console.log('您访问了属性', key)
                return value
            },
            set(newValue) {
                // set函数的执行 不会自动判断俩次修改的值是否相等
                // 显然如果相等 不应该执行变化的逻辑
                if (newValue === value) {
                    return
                }
                console.log('您修改了属性', key)
                value = newValue
                // 这里我们把最新的值 反映到视图中  这里是关键的位置
                // 核心：操作dom  就是通过操作dom api 把最新的值设置上去
                document.querySelector('#app p').innerText = newValue
                // 只要修改name属性 就会触发set函数的执行 内部我们把最新的值通过dom操作
                // 设置到dom内部  实现了数据的变化 反映到了视图中
            }
        })
    }
    document.querySelector('#app p').innerText = data.name
</script>
</body>
</html>
